<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="100px" size="small">
        <el-form-item label="标题">
          <el-input v-model="form.title" maxlength="200" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" v-show="$route.query.isParent != null">
          <el-select v-model="form.parentId" placeholder="所属分类">
            <el-option v-for="item in typeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="this.isdesiger != null ? '擅长风格' : (this.$route.query.join != null  ? '地址' : '二级标题')" v-show="$route.query.title2 != null">
          <el-input v-model="form.realTitle" maxlength="200" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="背景图片" v-show="$route.query.img != null">
          <el-row :gutter="1">
            <el-col :span="10">
              <el-input v-model="form.imgSrc" maxlength="200" placeholder="请上传封面图片"></el-input>
            </el-col>
            <el-col :span="4">
              <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess" :on-error="uploadError">
                <el-button type="primary">上传
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="图标" v-show="$route.query.img2 != null">
          <el-row :gutter="1">
            <el-col :span="10">
              <el-input v-model="form.imgSrc2"  maxlength="200" placeholder="请上传图标"></el-input>
            </el-col>
            <el-col :span="4">
              <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess2" :on-error="uploadError">
                <el-button type="primary">上传
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="所在地址" v-show="$route.query.file != null">
          <el-input v-model="form.fileSrc" maxlength="200" placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="this.isdesiger != null ? '工作经验' : (this.$route.query.join != null  ? '行业' : 'URL')"  v-show="$route.query.url != null">
          <el-input v-model="form.url" maxlength="500"  placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="this.isdesiger != null ? '履历介绍' : '内容'" v-show="$route.query.content != null">
          <script id="content" type="text/plain"></script>
        </el-form-item>

        <el-form-item label="浏览量" v-show="$route.query.view != null">
          <el-input type="number" v-model="form.viewCount" placeholder="浏览量"></el-input>
        </el-form-item>
        <el-form-item label="下载量" v-show="$route.query.down != null">
          <el-input type="number" v-model="form.downloadCount" placeholder="下载量"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" v-show="$route.query.updateTime != null">
          <el-date-picker v-model="form.updateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">确定</el-button>
        </el-form-item>

        <template v-if="isdesiger != null && id != null">
          <el-form-item label="作品案例">
            <el-button type="success" @click="showAddContent('作品案例')">添加作品案例</el-button>
            <el-table :data="dianxing" border style="width: 100%">
              <el-table-column prop="sort" label="排序（数字越大越靠前）" width="200">
                <template slot-scope="scope">
                  <el-input-number type="number" :min="0" @change="updateSort(scope.row)" :max="10000" v-model="scope.row.sort" > </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" width="180"> </el-table-column>
              <el-table-column prop="title" label="内容"> </el-table-column>
              <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click.native.prevent="editContent(scope.row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click.native.prevent="removeContent(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
      </el-form>
    </el-card>

    <el-dialog :title="contentForm.type" :visible.sync="showAddContentDiag">
      <el-form :model="contentForm" label-width="100px" size="small">
        <el-form-item label="标题">
          <el-input v-model="contentForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-row :gutter="1">
            <el-col :span="18">
              <el-input v-model="contentForm.imgSrc" placeholder="请上传图片"></el-input>
            </el-col>
            <el-col :span="4">
              <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="ContentUploadSuccess" :on-error="uploadError">
                <el-button type="primary">上传
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="contentForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ContentSubmit">确 定</el-button>
        <el-button @click="ContentCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findCategoryByParentId } from "@/api/category"
import { addArticle, GetArticleById, updateArticle } from "@/api/article"
import {
  findByparentIdType,
  insertContent,
  updateContent,
  deleteContent,
  updateArticleContentSort
} from "@/api/articleContent"
export default {
  name: "addArticle",
  data() {
    return {
      id: this.$route.query.id,
      parentId: this.$route.query.parentId,
      isParent: this.$route.query.isParent,
      pro: this.$route.query.pro,
      isdesiger: this.$route.query.isdesiger,
      solution:null,
      config: {
        autoHeightEnabled: false,
        autoFloatEnabled: false, //是否工具栏可浮动
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 400,
        UEDITOR_HOME_URL: "static/ueditor/"
      },
      editor: null,
      showAddContentDiag: false,
      contentForm: {
        title: "",
        type: "",
        imgSrc: "",
        content: "",
        parentId: this.$route.query.id
      },
      form: {
        title: "",
        titleEn: "",
        realTitle: "",
        description: "",
        imgSrc: "",
        imgSrc2: "",
        content: "",
        parentId: "",
        url: "",
        updateTime: new Date(),
        viewCount: 0,
        downloadCount: 0,
        fileSrc: ""
      },
      typeList: [],
      gongneng: [],
      youshi: [],
      xingtai: [],
      changjing: [],
      dianxing: [],
      jiejue: []
    }
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      this.form.imgSrc = response.data.file_name
    },
    uploadSuccess2(response, file, fileList) {
      this.form.imgSrc2 = response.data.file_name
    },
    add0(m){return m<10?'0'+m:m },
    getLocalTime(shijianchuo)
    {
    //shijianchuo是整数，否则要parseInt转换
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    return y+'-'+this.add0(m)+'-'+this.add0(d);
    },
    uploadError() {},
    showAddContent(type) {
      this.contentForm = {
        title: "",
        type: type,
        imgSrc: "",
        content: "",
        parentId: this.$route.query.id
      }
      this.showAddContentDiag = true
    },
    ContentUploadSuccess(response, file, fileList) {
      this.contentForm.imgSrc = response.data.file_name
    },
    uploadFileSuccess(response, file, fileList) {
      this.form.fileSrc = response.data.file_name
    },
    ContentCancel() {
      this.contentForm = {
        title: "",
        type: "",
        imgSrc: "",
        content: "",
        parentId: this.$route.query.id
      }
      this.showAddContentDiag = false
    },
    updateSort(row){
      updateArticleContentSort(row.sort,row.id).then(data=>{
        this.initSolu()
      })
    },
    ContentSubmit() {
      if (this.contentForm.title == "") {
        this.$message.error("请输入标题信息!")
        return
      }
      if (this.contentForm.id != null) {
        updateContent(this.contentForm).then(data => {
          this.initSolu()
          this.contentForm = {
            title: "",
            type: "",
            imgSrc: "",
            content: "",
            parentId: this.$route.query.id
          }
          this.showAddContentDiag = false
        })
      } else {
        insertContent(this.contentForm).then(data => {
          this.initSolu()
          this.contentForm = {
            title: "",
            type: "",
            imgSrc: "",
            content: "",
            parentId: this.$route.query.id
          }
          this.showAddContentDiag = false
        })
      }
    },
    editContent(row) {
      this.showAddContentDiag = true
      this.contentForm = {
        title: row.title,
        type: row.type,
        imgSrc: row.imgSrc,
        content: row.content,
        parentId: this.$route.query.id,
        id: row.id
      }
    },
    removeContent(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteContent(row.id).then(data => {
          this.showDelete = false
          if (data.result) {
            this.$message({
              message: "删除成功！",
              type: "success"
            })
          }
          this.initSolu()
        })
      })
    },
    initSolu() {
      if (this.isdesiger != null && this.id > 0) {
        findByparentIdType(this.id, "作品案例").then(data => {
          this.dianxing = data
        })
      }
    },
    submit() {
      if (this.form.title == "") {
        this.$message.error("请输入标题信息!")
        return
      }

      if (this.form.parentId == null || this.form.parentId == "") {
        this.$message.error("请选择分类信息!")
        return
      }

      if (this.editor != null) {
        this.form.content = this.editor.getContent()
      }

      if (this.id > 0) {
        updateArticle(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "更新成功！",
              type: "success"
            })
          } else {
            this.$message.error("更新失败!" + data.errMsg)
          }
        })
      } else {
        addArticle(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "添加成功！",
              type: "success"
            })
            this.form = {
              title: "",
              titleEn: "",
              realTitle: "",
              description: "",
              imgSrc: "",
              imgSrc2: "",
              content: "",
              parentId: "",
              url: "",
              updateTime: new Date(),
              viewCount: 0,
              downloadCount: 0,
              fileSrc: ""
            }
            if (this.isParent == null) {
              this.form.parentId = this.$route.query.parentId
            }
            this.editor.setContent("")
          } else {
            this.$message.error("添加失败!" + data.errMsg)
          }
        })
      }
    }
  },
  created() {
    if (this.isParent != null) {
      findCategoryByParentId(this.parentId).then(data => {
        this.typeList = data
      })
    } else {
      this.form.parentId = this.parentId
    }

    this.initSolu()
  },
  mounted() {
    let _this = this
    if (this.id != null && this.id != "" && this.id > 0) {
      this.form.id = this.id
      GetArticleById(this.id).then(data => {
        this.form = data
        this.form.updateTime = this.getLocalTime(this.form.updateTime)
        this.editor = UE.getEditor("content", this.config) // 初始化UE
        if (data.content != null && data.content != "") {
          this.editor.addListener("ready", function() {
            _this.editor.setContent(data.content) // 确保UE加载完成后，放入内容。
          })
        }
      })
    } else {
      this.editor = UE.getEditor("content", this.config) // 初始化UE
    }
  },
  destroyed() {
    if (this.editor != null) {
      this.editor.destroy()
    }
  }
}
</script>
<style>
.el-submenu .el-menu-item {
  height: 35px;
  line-height: 35px;
}
.el-form-item__content {
  line-height: 15px !important;
}
</style>
